<template>
	<view class="menu">
		<view class="search" @click="goSearch">
			<input type="text" class="inp" placeholder="点击跳转搜索"/>
			<view class="btn">
				<text>搜索</text>
			</view>
		</view>
		<view class="top">
			<view :class="['box',{active:num==index}]" v-for="(item,index) in menu" :key="index" @click="category(item,index)">
					<text>{{ item.typeDesc }}</text>
			</view>
		</view>
		<view class="shop_list">
			<view class="shop_opt" v-for="item in menuList" @click="goDetail(item.pid)">
			    <image class="shop_img" :src="item.smallImg" mode="widthFix"/>
			    <view class="shop_right">
			        <view class="shop_h">
			        <text>{{item.name}}</text>
			        </view>
			        <view class="shop_p">
			        <text>{{item.desc}}</text>
			        </view>
			        <view class="shop_price">
						<view>
							<text class="price">{{item.price}}</text>
							<text>预估到手</text>
						</view>
						<view class="shop_jia">+</view>
			        </view>
			    </view>
			</view>
		</view>
		
		<!-- 购物车 -->
		<view class="shop_cart">
			<view class="left">
				<image @click="isOrderFn" src="../../static/assets/qu.png" mode="widthFix"></image>
				<text>预估到手￥</text>
				<text class="num">{{price}}</text>
			</view>
			<view class="right">
				<text v-if="order.length == 0">不可结算</text>
				<text v-else @click="receiveAllFn">结算</text>
			</view>
		</view>
		
		<!-- 订单 -->
		<scroll-view class="order" scroll-y="true" v-if="isOrder">
			<view class="o_top">
				<text>订单</text>
			</view>
			<view class="box" v-for="item in order">
				<view class="left">
					<image :src="item.smallImg" mode="widthFix"></image>
				</view>
				<view class="right">
					<view class="title">
						<text>{{item.name}}</text>
						<view class="remove" @click="RemovePayFn(item.oid)">
							<text>删除</text>
						</view>
					</view>
					<view class="rule">
						<text>{{item.rule}}</text>
					</view>
					<view class="person">
						<text>收货人：{{item.receiver}}</text>
					</view>
					<view class="address">
						<text>收获地址：{{item.address}}</text>
					</view>
					<view class="count">
						<text>数量：{{item.count}}</text>
					</view>
					<view class="price">
						<text>价格：{{item.price}}元</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { menuFn,menuListFn,findOrderFn,removePayFn,receiveFn } from '../../api/index.js'
	export default {
		data() {
			return {
				menu:[],
				menuList:[],
				num:0,
				key:"isHot",
				value:"1",
				token:"",
				order:[],
				isOrder:false,
				price:0
			}
		},
		onLoad(options) {
			this.MenuFn();
			this.MenuListFn();
			this.token = uni.getStorageSync('token');
			this.FindOrderFn();
		},
		onShow() {
			this.token = uni.getStorageSync('token');
			this.FindOrderFn();
		},
		methods: {
			async MenuFn(){
				await menuFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA="
				})
				.then(
					content=>{
						// console.log(content);
						let {code,result} = content;
						let arr1 = [{id:0,type:"1",typeDesc:"热卖推荐"}];
						let arr = arr1.concat(result);
						if(code == 400){
							this.menu = arr;
						}
					}
				)
			},
			async MenuListFn(){
				// console.log(this.key,this.value);
				await menuListFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					key:this.key,
					value:this.value
				})
				.then(
					content=>{
						// console.log(content);
						let {code,result} = content;
						if(code == 500){
							this.menuList = result;
						}
					}
				)
			},
			category(value,index){
				let num1 = index;
				let key = "isHot";
				if(num1 != 0){
				  key = "type";
				}
				let value1 = this.menu[num1].type;
				// console.log(num1,key,value1);
				this.num = num1;
				this.key = key;
				this.value = value1;
				this.MenuListFn();
			},
			goSearch(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			goDetail(id){
				uni.navigateTo({
					url:'/pages/detail/detail?pid='+id
				})
			},
			async FindOrderFn(){
				await findOrderFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					tokenString:this.token,
					status:1
				})
				.then(
					content=>{
						// console.log(content);
						let {code,result} = content;
						if(code == 70000){
							this.order = result;
							let price = 0;
							for(let i=0;i<result.length;i++){
								let price_i = result[i].price * result[i].count * 1;
								price = price + price_i; 
							}
							this.price = price;
						}
					}
				)
			},
			isOrderFn(){
				this.isOrder = !this.isOrder;
			},
			async RemovePayFn(oid){
				// console.log(oid);
				await removePayFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					tokenString:this.token,
					oid:oid
				})
				.then(
					content=>{
						// console.log(content);
						let {code} = content;
						if(code == 90000){
							this.FindOrderFn();
						}
					}
				)
			},
			async ReceiveFn(oid){
				await receiveFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					tokenString:this.token,
					oid:oid
				})
				.then(
					content=>{
						console.log(content);
					}
				)
			},
			receiveAllFn(){
				for(let i=0;i<this.order.length;i++){
					this.ReceiveFn(this.order[i].oid);
				}
				this.FindOrderFn();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu{
		.search{
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.inp{
				width: 70%;
				height: 80rpx;
				border: 1px solid #252973;
				border-top-left-radius: 80rpx;
				border-bottom-left-radius: 80rpx;
				padding-left: 40rpx;
			}
			.btn{
				width: 20%;
				height: 80rpx;
				border: 1px solid #252973;
				border-top-right-radius: 80rpx;
				border-bottom-right-radius: 80rpx;
				text-align: center;
				line-height: 80rpx;
			}
		}
		.top{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			background-color: #f0f0f0;
			.box{
				width: 20%;
				text-align: center;
				font-size: 28rpx;
				color: #252973;
			}
			.box.active{
				border-bottom: 8rpx solid #252973;
				font-size: 32rpx;
				font-weight: bolder;
			}
		}
		
		.shop_list{
		  margin: 40rpx 20rpx;
		  .shop_opt{
		    width: 100%;
		    height: 400rpx;
		    display: flex;
			.shop_img{
			  width: 50%;
			}
			.shop_right{
			  width: 50%;
			  padding: 10rpx;
			  .shop_h{
			    font-size: 46rpx;
			    font-weight: bolder;
			  }
			  .shop_p{
			    font-size: 24rpx;
			    color: rgb(182, 174, 174);
			    margin-top: 10rpx;
			    margin-bottom: 20rpx;
			    height: 210rpx;
			    /*设置为弹性盒子*/
			    display:-webkit-box;
			    /* 表示几行后超出隐藏 */
			    -webkit-line-clamp:7;
			    overflow: hidden;
			    text-overflow:ellipsis;
			    -webkit-box-orient:vertical;
			  }
			  .shop_price{
			    font-size: 30rpx;
			    color: red;
			    display: flex;
			    justify-content: space-between;
				.price{
				  font-size: 40rpx;
				}
				
				.shop_jia{
				  font-size: 50rpx;
				  background-color: #252973;
				  width: 60rpx;
				  height: 60rpx;
				  border-radius: 50%;
				  text-align: center;
				  line-height: 50rpx;
				  color: white;
				}
			  }
			}
		  }
		}
		.shop_cart{
			display: flex;
			width: 90%;
			position: fixed;
			bottom: 150rpx;
			height: 80rpx;
			line-height: 80rpx;
			left: 5%;
			z-index: 1000;
			.left{
				width: 70%;
				background-color: #fff;
				border-top-left-radius: 40rpx;
				border-bottom-left-radius: 40rpx;
				border: 1px solid black;
				display: flex;
				image{
					width: 60rpx;
					margin-left: 20rpx;
				}
				text{
					margin-left: 10rpx;
				}
				.num{
					color: red;
					font-size: 40rpx;
					margin-left: 0;
				}
			}
			.right{
				width: 30%;
				text-align: center;
				background-color: #292b74;
				border: 1px solid black;
				color: #fff;
				border-top-right-radius: 40rpx;
				border-bottom-right-radius: 40rpx;
			}
		}
		.order{
			width: 80%;
			margin-left: 10%;
			position: fixed;
			bottom: 230rpx;
			background-color: #fff;
			border: 5px solid #252973;
			height: 600rpx;
			.o_top{
				text-align: center;
				font-size: 50rpx;
				font-weight: bold;
				color: #fff;
				background-color: #252973;
			}
			.box{
				margin-bottom: 40rpx;
				display: flex;
				width: 100%;
				.left{
					width: 50%;
					image{
						width: 100%;
					}
				}
				.right{
					margin-left: 20rpx;
					width: 50%;
					.title{
						font-size: 38rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
						display: flex;
						justify-content: space-between;
						.remove{
							font-size: 24rpx;
							margin-top: 5rpx;
							padding: 10rpx;
							background-color: #252973;
							color: #fff;
							border-radius: 50rpx;
						}
					}
					.rule{
						font-size: 24rpx;
						color: #ccc;
						margin-bottom: 10rpx;
					}
					.person{
						font-size: 24rpx;
						margin-bottom: 10rpx;
					}
					.address{
						font-size: 24rpx;
						margin-bottom: 10rpx;
					}
					.count{
						margin-bottom: 10rpx;
					}
					.price{
						color: red;
						font-size: 36rpx;
					}
				}
			}	
		}
	}
</style>
